// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../views/About'
import Home from '../views/Home'
import Message from '../views/Message'
import News from '../views/News'
import Detail from '../views/Detail'


//创建并暴露一个路由器
const router = new VueRouter({
	routes:[
		{
			name: 'about',
			path: '/about',
			component: About,
			meta:{title:'关于'}
		},
		{
			name: 'home',
			path: '/home',
			component: Home,
			meta:{title:'主页'},
			children: [
				{
					name: 'message',
					path:'message',
					component: Message,
					meta: {title: '信息',isAuth: true},
					children: [
						{
							name:'detail',
							path:'detail/:id/:title',
							component: Detail,
							props({params: {id, title}}) {
								return {
									id,
									title,
									a: 1,
									b: 'hello'
								}
							}
						}
					]
				},
				{
					name: 'news',
					path:'news',
					component: News,
					meta: {title: '新闻',isAuth: true},
					// 独享路由守卫
					beforeEnter:( (to, from ,next) => {
						console.group('独享路由守卫');
						console.log('to:', to);
						console.log('from:', from);
						console.groupEnd();
						to.meta.isAuth ? ( localStorage.getItem('flag') ? next() : alert('你没有访问 news 的权限') ) : next();
					})
				}
			]
		}
	]
})

// 全局前置路由守卫-----初始化的时候被调用、每次路由切换之前被调用
// router.beforeEach( (to, _, next) => to.meta.isAuth ? ( localStorage.getItem('flag') ? next() :	alert('你没有访问 news 和 message 的权限') ) : next() );

// 全局后置路由守卫-----初始化的时候被调用、每次路由切换之前被调用
// router.afterEach( to => document.title = to.meta.title	|| '硅谷系统' )

export default router